<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 首先script代码块可以看做第一个宏任务，开始第一个Tick事件循环
        // 2. 会先执行script代码块中的同步代码
        // 3. 如果遇到宏任务，就放到宏任务队列中等待执行，如果遇到微任务，放到微任务队列中
        // 4. 当主线程执行完同步代码的时候，首先去微任务队列中清空当前事件循环的所有微任务（本轮事件循环Tick结束）
        // 5. 再去执行下一个宏任务 ==> 这个时候是下一次事件循环了

        // 宏任务
        // 1. script ==> 宏任务
        // 2. setTimeout
        // 3. setInterval
        // 4. setImmediate

        // 微任务
        // 1. promise.then()  promise.catch() 的回调cb
        // 2. async await
        // 3. mutationObserver ==> 监听DOM的改变
        // 4. process.nextTick() ==> Node

        // 微任务是包含在宏任务里面的
        // 一个宏任务中 可以有多个微任务
        // setTimeout这个宏任务 是当前这个宏任务执行完毕后 下一次事件循环开始再执行

        /*==================================    ====================================*/
        // 0  2  4  3 （这个时间点，本轮事件循环Tick结束） 1
        console.log(0);

        setTimeout(function () {
            // 宏任务队列 1 
            console.log(1);    // 遇到setTimeout， 把setTimeout的回调放到宏任务队列里面去
        });

        new Promise(function (resolve, reject) {
            console.log(2)
            resolve(3) // 可以跳过
            // resolve()
        }).then(function (val) {
            console.log(val);  // .then()的回调 微任务，放到微任务对列里面去 微1
        }).then(() => {
            console.log(666)
        }).then(() => {
            console.log(888)
        })

        console.log(4);



    </script>
</body>

</html>